<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/utils/bootstrap/css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*background-color: lightpink;*/
            word-break: break-all;
            /*overflow: hidden;*/
            /*background-image: url(./assets/bg.jpeg) ;*/
            /*opacity: .5;*/

        }

        body a:hover{
            text-decoration: none;

        }
        .nav-wrapper{
            width: 100%;
            height: 40px;
            min-width: 800px;
            line-height: 40px;
            background-color: #003b5c;
            display: flex;

            justify-content:center;
            align-items: center;

        }
        .nav-box{
            margin: 0 auto;
            display: flex;
            min-width: 800px;
            justify-content: space-between;
        }
        .navItem{
            color:#8f99a3;
            margin: 0 20px;
        }
        .search{

        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.form-control{
            color:#fff!important;;
            margin-top: 2px!important;
            background-color:#003b5c!important;
            border-radius: 25px!important;
            padding: 6px 20px;
            width: 250px!important;
        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.input-group-btn>.btn-info{
            background-color:#003b5c !important;
            border: 0px;
            position: absolute;
            left:-50px;
            top:10px;
            z-index: 9999;
        }
        .loginBtn{
            background-color: #95d4ea;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        .regBtn{
            background-color: #EC7B6D;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        /*主体*/


        .rgis-wrapper{
            margin: 100px auto;
            width: 520px;
            height: 720px;
            padding: 30px;
            right: 100px;
            bottom: 30%;
            /*background-color:lightblue;*/
            /*opacity: .8;*/
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.06);

            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        rgis-wrapper>div>div a{
            text-decoration: none;
        }
        input.form-control{
            background-color:#F0FFFF !important;
        }
        .input-group-addon{
            border: 0px !important;
            background-color: #fff !important;
            color: #999999 !important;
            font-size: 16px !important;
        }
        .input-group{
            /*font-size: 16px !important;*/
        }
        .input-group > .form-control{
            border: 0px  !important;

        }
        /*去除bootstrap点击按钮的边框*/
        .btn:focus{
            outline: none !important;
        }
        /*--------------*/
        .footer{
            width: 100%;
            height: 40px;
            background-color: black;
            display: flex;
            color: #999999;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
        }

    </style>
</head>
<script src="../js/utils/jQuery/index.js"></script>

<script src="../js/utils/bootstrap/js/bootstrap.min.js"></script>
<body>
<div>
    <div class="nav-wrapper" >
        <div class="nav-box" >
            <div class="navItem"><img style="width: 50px;height:25px; " src="../assets/suss_logo_write.png" alt=""></div>
            <div class="navItem">ALL COURSES</div>
            <!--  <div class="navItem">
                  <input type="text" class="btn-search form-control" placeholder="Search">
              </div>-->
            <div class="navItem">
                <div class="input-group"  style="margin-top: 3px;">
                    <input type="text" class="form-control"placeholder="请输入字段名" />
                    <span class="input-group-btn">
                            <button type="submit" class="btn btn-info btn-search glyphicon glyphicon-search" style="margin-top: -7px;"></button>
                        </span>
                </div>
            </div>



            <div class="navItem">About US</div>
            <div class="navItem" style="display: flex;">
                <div style="display: flex;align-items: center;"><a href="02登录.html" class="loginBtn">Login</a></div>
                <div style="display: flex;align-items: center; margin-left: 5px;"><a href="03注册.html" class="regBtn">Register</a></div>
            </div>
        </div>
    </div>
</div>


<div>
    <form role="form" class="rgis-wrapper">


    <div style="display: flex;justify-content: center">
        <a href="Javascript:" style="font-size: 20px;font-weight: 600;" id="SignUp">Sign Up</a>
    </div>

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Email:</span>
        <input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
    </div>


    <div class="input-group" style="display: flex;justify-content: space-between;">
        <input type="text" style="width: 260px;border-radius: 3px !important;" class="form-control " placeholder="Verification Code" aria-describedby="basic-addon3">
        <div style="display: flex;flex-direction: column;">
            <button style="color: #999999;"  class="btn btn-default">Send Verification Code</button>
        </div>
    </div>

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">FullName:</span>
        <input type="text" class="form-control" placeholder="FullName" aria-describedby="basic-addon2">
    </div>

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">PassWord:</span>
        <input type="password" class="form-control" placeholder="Password" aria-describedby="basic-addon3">
    </div>

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon4">PassWord Again:</span>
        <input type="password" class="form-control" placeholder="Password Again" aria-describedby="basic-addon4">
    </div>

  <!--  <div class="input-group" style="display: flex;justify-content: center">
        <button   style="width: 180px;background-color:#95d4ea;color: #fff;font-size: 18px;" class="btn btn-default">Sign In</button>
    </div>-->



    <div class="form-group">
        <div style="display: flex;">
            <select id="usertype"  style="width: 150px;" class="form-control" >
                <option selected>Country Code</option>
                <option value="1">菠萝</option>
                <option value="2">香蕉</option>

            </select>
            <input type="text" class="form-control" placeholder="PhoneNumber" aria-describedby="basic-addon5">
        </div>
    </div>

    <div class="form-group" style="display: flex;justify-content: space-between;">
         <div>
             <input type="checkbox"  value="true">
             <span style="color: #999999;font-size: 15px;">I have read and accepted the Terms & Conditions</span>
         </div>
          <div>
              <a href="javascript:" style="font-size: 17px;font-weight: 500;color:#003b5c" id="SignIn">Sign In</a>
          </div>
    </div>

    <div class="input-group" style="display: flex;justify-content: center;">
        <button style="width: 180px;background-color:#95d4ea;font-size: 18px;font-weight: 500;"  class="btn btn-default">Submit</button>
    </div>
    </form>
</div>



<div class="footer">
    Copyright @ 2021 Singapore University of Social Sciences.All rights reserved.
</div>



<script>

</script>
</body>
</html>